<script setup lang="ts">
import { useThemeVars } from 'naive-ui';
import FavoriteButton from './FavoriteButton.vue';
import type { Tool } from '@/tools/tools.types';

const props = defineProps<{ tool: Tool & { category: string } }>();
const { tool } = toRefs(props);
const theme = useThemeVars();
</script>

<template>
	<router-link :to="tool.path" class="decoration-none">
		<c-card
			class="h-full transition transition-duration-0.5s !border-2px !hover:border-primary">
			<div flex items-center justify-between>
				<n-icon
					class="text-neutral-400 dark:text-neutral-600"
					size="40"
					:component="tool.icon" />

				<div flex items-center gap-8px>
					<div
						v-if="tool.isNew"
						class="rounded-full px-8px py-3px text-xs text-white dark:text-neutral-800"
						:style="{
							'background-color': theme.primaryColor
						}">
						{{ $t('toolCard.new') }}
					</div>

					<FavoriteButton :tool="tool" />
				</div>
			</div>

			<div class="truncat my-5px text-lg text-black dark:text-white">
				{{ tool.name }}
			</div>

			<div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">
				{{ tool.description }}
			</div>
		</c-card>
	</router-link>
</template>
